<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<title>留言板</title>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="favicon.ico" >
<LINK rel="Shortcut Icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script type="text/javascript" th:src="@{/staticRes/js/html5shiv.js}"></script>
<scrith:pt type="text/javascript" th:src="@{/staticRes/js/respond.min.js}"></scrith:pt>
<![endif]-->
<link rel="stylesheet" type="text/css" th:href="@{plugin/h-ui/css/H-ui.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{plugin/Hui-iconfont/1.0.8/iconfont.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{css/common.css}" />
<link rel="stylesheet" type="text/css" th:href="@{plugin/pifu/pifu.css}" />
<link rel="stylesheet" type="text/css" th:href="@{plugin/wangEditor/css/wangEditor.min.css}">
<!--[if lt IE 9]>
<link th:href="@{/staticRes/lib/h-ui/css/H-ui.ie.css}" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } function showSide(){$('.navbar-nav').toggle();}</script>
</head>
<body>
<div th:replace="~{commons/commons::blogHeader}"></div>

<!--导航条-->
<nav class="breadcrumb">
    <div class="container"> <i class="Hui-iconfont">&#xe67f;</i> <a href="/" class="c-primary">首页</a> <span class="c-gray en">&gt;</span>  <span class="c-gray">留言板</span> </div>
</nav>

<section class="container">
    <div class="col-xs-12 col-md-10 col-md-offset-1 mt-20">
        <!--用于评论-->
        <div class="mt-20" id="ct">
            <form action="/blog/message/sendMessage1">
                <div id="err" class="Huialert Huialert-danger hidden radius">成功状态提示</div>
                <textarea id="textarea1" name="content" style="height:200px;" placeholder="看完不留一发？"> </textarea>
                <div class="text-r mt-10">
                    <button type="submit" class="btn btn-primary radius" > 发表评论</button>
                </div>
            </form>
        </div>

        <div class="line"></div>

        <ul class="commentList mt-50">

            <!--一级留言-->
          <li th:each="message1:${map.messageList}" class="item cl">
              <a href="#"><i class="avatar size-L radius"><img alt="" th:src="${message1.img}"></i></a>
                <div class="comment-main">
                    <header class="comment-header">
                        <div class="comment-meta"><a class="comment-author" href="#"><span th:text="${message1.uname}"></span></a>
                            <time th:text="${message1.createtime}" class="f-r"></time>
                        </div>
                    </header>
                    <div class="comment-body">
                        <span th:utext="${message1.content}"></span>

                        <ul class="commentList">
                        <!--二级留言-->
                            <li th:each="messageTwo:${message1.message2}" class="item cl">
                                <a href="#"><i class="avatar size-L radius"><img alt="" th:src="${messageTwo.img}"></i></a>
                                <div class="comment-main">
                                    <header class="comment-header">
                                        <div class="comment-meta"><a class="comment-author" href="#"><span th:text="${messageTwo.uname}"></span></a>
                                            <time th:text="${messageTwo.createtime}" class="f-r">2014-8-31 15:20</time>
                                        </div>
                                    </header>
                                    <div class="comment-body">
                                        <p th:utext="${messageTwo.content}"></p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <button th:onclick="|javascript:saveId('${message1.id}')|"  class="hf f-r btn btn-default size-S mt-10" name="2">回复</button>
                    </div>
                </div>

            </li>


        </ul>

        <!--用于回复-->
        <div class="comment hidden mt-20">
            <div id="err2" class="Huialert Huialert-danger hidden radius">成功状态提示</div>
            <textarea id="msgContent" class="textarea" style="height:100px;" > </textarea>
            <button onclick="sendMessage2()" type="button" class="btn btn-primary radius mt-10">回复</button>
            <a class="cancelReply f-r mt-10">取消回复</a>
        </div>

    </div>
</section>

<div th:replace="~{commons/commons::blogFooter}"></div>

<script type="text/javascript" th:src="@{plugin/jquery/1.9.1/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{plugin/layer/3.0/layer.js}"></script>
<script type="text/javascript" th:src="@{plugin/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:src="@{plugin/pifu/pifu.js}"></script>
<script type="text/javascript" th:src="@{js/common.js}"></script>
<script> $(function(){ $(window).on("scroll",backToTopFun); backToTopFun(); }); </script>
<script type="text/javascript" th:src="@{plugin/wangEditor/js/wangEditor.min.js}"></script>

<script type="text/javascript">
    $(function () {
        wangEditor.config.printLog = false;
        var editor1 = new wangEditor('textarea1');
        editor1.config.menus = ['insertcode', 'quote', 'bold', '|', 'img', 'emotion', '|', 'undo', 'fullscreen'];
        editor1.config.emotions = { 'default': { title: '老王表情', data: 'plugin/wangEditor/emotions1.data'}, 'default2': { title: '老王心情', data: 'plugin/wangEditor/emotions3.data'}, 'default3': { title: '顶一顶', data: 'plugin/wangEditor/emotions2.data'}};
        editor1.create();

        //show reply
        $(".hf").click(function () {
            pId = $(this).attr("name");
            $(this).parents(".commentList").find(".cancelReply").trigger("click");
            $(this).parent(".comment-body").append($(".comment").clone(true));
            $(this).parent(".comment-body").find(".comment").removeClass("hidden");
            $(this).hide();
        });
        //cancel reply
        $(".cancelReply").on('click',function () {
            $(this).parents(".comment-body").find(".hf").show();
            $(this).parents(".comment-body").find(".comment").remove();
        });
    });
    var mid = 0;

    function sendMessage2() {
        var msgContent = $("#msgContent").val();
        $.ajax({
            url:"/blog/message/sendMessage2",
            type:"post",
            dataType:"json",
            data:{"content":msgContent,"mid":mid},
            success:function (data){
                if (data==200){
                    location.href="board.html";
                }
            }
        });
    }

    function saveId(id) {
        mid = id;
    }

</script>

</body>
</html>
